<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>事件处理</title>
</head>
<body>
  <button id="btn">测试按钮</button>
  <script>

    var EventUtil = {

      addHandler: function(event, type, handler) {
        if (event.addEventListener) {
          // Dom2级事件处理
          console.log(2)
          event.addEventListener(type, handler, false);
        } else if (event.attachEvent) {
          // IE8及其以下版本只支持冒泡事件
          console.log(1)
          event.attachEvent("on" + type, function(event){
            // this指向window,使用.call方法改变this指向
            // 同个事件以入栈形式添加出栈顺序触发
            return handler.call(event, event)
          })
        } else {
          // Dom0级事件处理
          console.log(0)
          event["on" + type] = handler;
        }
      },

      getEvent: function(event) {
        return event ? event : window.event;
      },

      getTarget: function(event) {
        return event.target || window.event.target;
      },
      
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },

      removeHandler: function(event, type, handler) {
        if (event.removeEventListener) {
          event.removeEventListener(type, handler, false);
        } else if (event.detachEvent) {
          event.detachEvent("on" + type, function(event){
            return handler.call(event, event)
          });
        } else {
          event["on" + type] = null;
        }
      },

      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }

    }
    var btn  = document.getElementById('btn');
    var func = function() {
      console.dir(this);
      console.log(1);
    }
    var func1 = function() {
      console.dir(this);
      console.log(2);
    }
    EventUtil.addHandler(btn, 'click', func);
    EventUtil.addHandler(btn, 'click', func1);
    // EventUtil.removeHandler(btn, 'click', func);
  </script>
</body>
</html>